/* eslint-disable react/display-name */

import React, { useState, useEffect } from 'react';
import path from 'path';
import getRoot, { DirTreeType } from '../client/file';
import Directory from '../components/directory';
const ProjectDirectory = () => {
  const [tree, setTree] = useState<Array<DirTreeType>>([]);

  useEffect(() => {
    const dirTree = getRoot(path.resolve(__dirname, 'project'));
    setTree(dirTree);
  }, []);

  const getTree = (tree: Array<DirTreeType>) => {
    return tree.map((item) => {
      return (
        <Directory
          {...item}
          childrens={item.children}
          key={item.id}
        ></Directory>
      );
    });
  };

  return <>{getTree(tree)}</>;
};

export default ProjectDirectory;
